<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cInnerContent">
<h1 class="header-section gs_reveal ipsType_center">Scroll reveal animations</h1>
<div class="features">
<div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
<div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromLeft">
<div class="card">
<img width="479" src="https://picsum.photos/479/479?index=1" alt="">
</div>
</div>
<div class="ipsGrid_span7 ipsType_left">
<h2 class="heading_large gs_reveal">Create amazing <strong>SVG</strong> animations</h2>
<p class="gs_reveal"><a href="https://greensock.com/drawsvg/">DrawSVGPlugin</a> allows you to progressively reveal (or hide) SVG strokes to make them look like they're being drawn. <a href="https://greensock.com/morphsvg/">MorphSVGPlugin</a> to Morph any SVG shape into any other shape smoothly regardless of the number of points in each. <a href="/docs/v3/Plugins/MotionPathPlugin">MotionPathPlugin</a> allows you to easily move any object along a path.</p>
</div>
</div>
<div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
<div class="ipsGrid_span7 ipsType_right">
<h2 class="heading_large gs_reveal">Supercharge immersive <strong>WebGL</strong> experiences</h2>
<p class="gs_reveal">GreenSock is used in some of the most popular <a href="//threejs.org/">Three.js</a> powered WebGL projects. Animate any object in a scene. <a href="https://greensock.com/PixiPlugin/">PixiPlugin</a> makes animating <a href="//www.pixijs.com/">Pixi.js</a> objects with GSAP a breeze. Animate position, scale, color effects and more with all the power and control of GSAP and the rendering speed of Pixi.js.</p>
</div>
<div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromRight">
<div class="card">
<img width="479" src="https://picsum.photos/479/479?index=2" alt="">
</div>
</div>
</div>
<div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
<div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromLeft">
<div class="card">
<img width="479" src="https://picsum.photos/479/479?index=3" alt="">
</div>
</div>
<div class="ipsGrid_span7 ipsType_left">
<h2 class="heading_large gs_reveal">Control performant <strong>Canvas</strong> animations</h2>
<p class="gs_reveal">GSAP makes animating with Canvas even easier by providing an easier way to look and sequence animations. GSAP works great with <a href="//www.adobe.com/products/animate.html">Adobe Animate</a> and <a href="//createjs.com/easeljs">EaseJS</a> through GSAP's <a href="https://greensock.com/easelplugin/">EaselJSPlugin</a>.</p>
</div>
</div>
<div class="feature ipsSpacer_bottom_double ipsGrid ipsGrid_collapsePhone">
<div class="ipsGrid_span7 ipsType_right">
<h2 class="heading_large gs_reveal"><strong>Award winning</strong> websites</h2>
<p class="gs_reveal">GSAP is used on over 8,500,000 sites and over 1,000 sites featured on <a href="https://www.awwwards.com/websites/gsap-animation/" target="_blank">Awwwards</a>. For some of our favorites, check out <a href="https://greensock.com/showcase/">our showcase</a>.</p>
</div>
<div class="featured-image-container ipsGrid_span5 gs_reveal gs_reveal_fromRight">
<div class="card">
<img width="479" src="https://picsum.photos/479/479?index=4" alt="">
</div>
</div>
</div>
</div>
</div>
<header>
<a href="https://greensock.com/scrolltrigger">
<img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
</a>
</header>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
/* Styles from the GreenSock website */
body {
font-weight: 300;
}
.ipsType_right {
text-align: right;
}
.ipsType_center {
text-align: center;
}
.cInnerContent {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
}
.ipsSpacer_bottom_double {
margin-bottom: 30px;
}
.ipsGrid {
display: inline-block;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.ipsGrid::before, .ipsGrid::after {
display: table;
content: "";
line-height: 0;
}
.ipsGrid > [class*=ipsGrid_span] {
display: block;
width: 100%;
min-height: 30px;
box-sizing: border-box;
}
.ipsGrid > .ipsGrid_span5 {
width: 40.4255319149%;
}
.ipsGrid > .ipsGrid_span7 {
width: 57.4468085106%;
}
.ipsGrid > [class*=ipsGrid_span] {
float: left;
margin-left: 2%;
}
.ipsGrid > [class*=ipsGrid_span]:first-child {
margin-left: 0;
}
.feature {
display: flex;
align-items: center;
}
.card {
margin-bottom: 30px;
border: 1px solid #cccccc;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
box-shadow: 1px 1px 5px 1px #CCCCCC;
/* transition: 0.3s; */
}
.featured-image-container .card {
padding: 10px;
height: 0;
padding-bottom: calc(100% - 10px);
}
h2.heading_large {
font-size: 1.8em;
}
img {
max-width: 100%;
}
.header-section {
margin: 200px auto;
}
.gs_reveal {
opacity: 0;
visibility: hidden;
will-change: transform, opacity;
}
function animateFrom(elem, direction) {
direction = direction || 1;
var x = 0,
y = direction * 200;
if(elem.classList.contains("gs_reveal_fromLeft")) {
x = -300;
y = 300;
} else if (elem.classList.contains("gs_reveal_fromRight")) {
x = 300;
y = 300;
}
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
gsap.fromTo(elem, {x: x, y: y, autoAlpha: 0}, {
duration: 2.25,
x: 0,
y: 0,
autoAlpha: 1,
ease: "expo",
// overwrite: "auto"
});
}
function hide(elem) {
gsap.set(elem, {autoAlpha: 0});
}
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray(".gs_reveal").forEach(function(elem) {
hide(elem); // assure that the element is hidden when scrolled into view
ScrollTrigger.create({
trigger: elem,
onEnter: function() { animateFrom(elem) },
onEnterBack: function() { animateFrom(elem, -1) },
onLeave: function() { hide(elem) } // assure that the element is hidden when scrolled into view
});
});
});
